<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
</head>

<body>
<div class="nav_top" id="d1">
    <nav>
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">MARK</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
                        aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse col-lg-5 offset-md-7" id="navbarTogglerDemo02">
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item active">
                            <a class="nav-link" href="#d1">主页<span class="sr-only">(current)</span></a>
                            <a href="" class="a2"></a>
                            <a href="" class="a3"></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d2">关于<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d3">技能<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d4">步骤<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d5">作品<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d6">联系<span class="sr-only">(current)</span></a>
                        </li>

                    </ul>
                </div>
            </nav>
        </div>
    </nav>

    <nav class="nav2" id="nav2">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">MARK</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
                        aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse col-lg-5 offset-md-7" id="navbarTogglerDemo02">
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item active">
                            <a class="nav-link" href="#d1" id="a1">主页<span class="sr-only">(current)</span></a>
                            <a href="" class="a2"></a>
                            <a href="" class="a3"></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d2">关于<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d3">技能<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d4">步骤<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d5">作品<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#d6">联系<span class="sr-only">(current)</span></a>
                        </li>

                    </ul>
                </div>
            </nav>
        </div>
    </nav>
    <header>
        <div class="content">
            <p>欢迎</p>
            <h1>我是马克·史蒂夫</h1>
            <span></span>
        </div>
    </header>
</div>


    <section id="d2">
        <div class="container">
            <img src="img/2019-10-07_112339.png">
            <div class="right">
                <h3>关于我</h3>
                <div class="he_nav">
                    <p></p>
                    <span></span>
                </div>
                <div class="about">
                    <p></p>
                    <ul>
                        <li><b>姓名：郭翔</b></li>
                        <li><b>年龄：20</b></li>
                        <li><b>地址：河北省邯郸市</b></li>
                        <li><b>电子邮件：2234716090@qq.com</b></li>
                        <li><b>电话：15233845644</b></li>
                        <li><b>职位：前端开发</b></li>
                    </ul>
                    <button>雇用</button>
                    <button>我的工作</button>
                </div>

            </div>
        </div>
    </section>

    <div class="zhuan" id="d3">
        <div class="container">
            <div class="top1">
                <h3>专业技能</h3>
                <div class="he_nav">
                    <p></p>
                    <span></span>
                </div>
            </div>
            <div class="zhuan_right">
                <img src="img/2019-10-18_082430.png">
                <ul>
                    <li>
                        <h3>HTML</h3>
                        <p>· 熟练HTML/XHTML标签语意</p>
                        <p>· 熟练div+css 能够根据设计图高效实现页面布局和交互效果</p>
                    </li>
                    <li>
                        <h3>CSS</h3>
                        <p>· 熟练掌握css及css3新属性及用法；</p>

                    </li>
                    <li>
                        <h3>BOOTSTRAP</h3>
                        <p>· 掌握BootStrap框架，实践过响应式布局；</p>
                    </li>
                </ul>
            </div>
            <div class="zhuan_left">
                <img src="img/2019-10-18_082449.png">
                <ul>
                    <li>
                        <h3>JAVA SCRIPT</h3>
                        <p>· 熟悉javascript，以及jquery、swiper等常见框架使用</p>
                    </li>
                    <li>
                        <h3>AJAX</h3>
                        <p>· 明白完成ajax交互原理</p>
                    </li>
                    <li>
                        <h3>vue</h3>
                        <p>· 可以运用Vue.js框架</p>
                    </li>
                </ul>
            </div>

        </div>
    </div>

        <div class="nav2" id="d4">
            <div class="container">
                <div class="top1">
                    <h3>开发步骤</h3>
                    <div class="he_nav">
                        <p></p>
                        <span></span>
                    </div>
                </div>
                <ul class="ul1">
                    <li><a href="">
                        <img src="img/2019-10-19_094911_02.jpg">
                            <h3>开发准备</h3>
                        <p>参加需求、交互、视觉会议，了解产品设计和项目成员</p>
                        <p>在交互或视觉会议中结合技术要求，提出疑问和见解</p>
                        <p>技术调研和培训.预算人力和时间</p>
                        </a></li>
                    <li><a href="">
                        <img src="img/2019-10-19_094911_04.jpg">
                            <h3>开发过程</h3>
                        <p>确定一个页面工程师负责人，负责对整个页面开发工作做统筹规划、
                            分配协调等管理工作和主开发职责。</p>
                        <p>页面开发.提取剥离</p>
                        </a></li>
                    <li><a href="">
                        <img src="img/2019-10-19_094911_06.jpg">
                            <h3>开发产出</h3>
                        <p>更新、合并、解决冲突、提交。</p>
                        <p>提交验收 效果验收将主要检查视觉效果符合度.交接说明</p>
                        <p>总结分享.变更维护</p>
                        </a></li>
                </ul>
            </div>
        </div>

        <div class="nav3" id="d5">
            <div class="container">
                <div class="top1">
                    <h3>作品</h3>
                    <div class="he_nav">
                        <p></p>
                        <span></span>
                    </div>
                </div>
                <ul class="ul2">
                    <li><a href="">
                        <div class="zhe"><h1>腾讯新闻</h1></div>
                        <img src="img/2019-10-18_162308.png">
                    </a></li>
                    <li><a href="">
                        <div class="zhe"><h1>堆糖</h1></div>
                        <img src="img/2019-10-18_162331.png">
                    </a></li>
                    <li><a href="">
                        <div class="zhe"><h1>天涯明月刀</h1></div>
                        <img src="img/2019-10-18_162428.png">
                    </a></li>
                    <li><a href="">
                        <div class="zhe"><h1>云巴网</h1></div>
                        <img src="img/2019-10-18_162451.png">
                    </a></li>
                    <li><a href="">
                        <div class="zhe"><h1>Home网页</h1></div>
                        <img src="img/2019-10-18_162546.png">
                    </a></li>
                    <li><a href="">
                        <div class="zhe"><h1>repute网页</h1></div>
                        <img src="img/2019-10-18_162641.png">
                    </a></li>
                </ul>
            </div>
        </div>

        <div class="contact" id="d6">
            <div class="container">
                <div class="top1">
                    <h3>联系我</h3>
                    <div class="he_nav">
                        <p></p>
                        <span></span>
                    </div>
                </div>
                <div class="contact_left">
                    <ul>
                        <li>
                            <img src="img/a.png" alt="">
                            <h3>电子邮件</h3>
                            <p>2234716090@qq.com</p>
                        </li>
                        <li>
                            <img src="img/aa.png" alt="">
                            <h3>位置</h3>
                            <p>河北省邯郸市</p>
                        </li>
                        <li>
                            <img src="img/aaa.png" alt="">
                            <h3>电话</h3>
                            <p>152338456444</p>
                        </li>
                    </ul>
                </div>
                <div class="contact_right">
                    <input placeholder="Enter Name" class="input1">
                    <input placeholder="Enter Email" class="input1">
                    <input placeholder="Enter Sujbect" class="input2">
                    <textarea placeholder="Meassage" class="input3"></textarea>
                    <button class="button1">发邮件</button>
                </div>
            </div>
        </div>

            <footer>
                <div class="container">
                    <ul>
                        <li><img src="img/2019-10-19_084738.png" alt=""></li>
                        <li><img src="img/2019-10-19_084752.png" alt=""></li>
                        <li><img src="img/2019-10-19_084804.png" alt=""></li>
                        <li><img src="img/2019-10-19_084814.png" alt=""></li>
                        <li><img src="img/2019-10-19_084826.png" alt=""></li>
                        <li><img src="img/2019-10-19_084834.png" alt=""></li>
                    </ul>
                    <p>Copyright © 2018.Company name All rights reserved.More Templates</p>
                </div>
            </footer>


        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
        <script src="srcpit.js"></script>
</body>

</html>